<template>
  <view
    class="rich-text"
    :class="{'rich-text__full-screen': $$FormData.full_screen}"
    :style="{backgroundColor: $$FormData.background_color}"
  >
    <rich-text :nodes="content"/>
  </view>
</template>

<script>
import decorMixin from '../decor-mixin'
import Base64 from '@/common/base64.min'
export default {
  name: 'RichTextPreview',
  mixins: [decorMixin],
  computed: {
    content() {
      const { content } = this.$$FormData
      return content ? Base64.decode(content) : ''
    }
  }
}
</script>

<style lang="scss">
.rich-text {
  position: relative;
  box-sizing: border-box;
  padding: 20rpx 20rpx 0;
  overflow: hidden;
  color: #333;
  font-size: 32rpx;
  line-height: 1.5;
  text-align: left;
  word-wrap: break-word;
  &__full-screen {
    margin-top: 0;
    padding: 0;
  }
  /deep/ {
    img+br {
      display: block;
      padding: 8rpx 0;
      content: " "
    }
    p {
      margin: 0 0 1em
    }
    .Powered-by-XIUMI p {
      margin: 0
    }
    a {
      color: #07d
    }
    img {
      max-width: 100%!important;
      min-height: 2rpx;
      vertical-align: bottom;
      background: 0 0
    }
    img,
    & ol {
      width: auto!important
    }
    blockquote {
      margin: 0 0 36rpx;
      padding: 0 0 0 30rpx;
      border-left: 10rpx solid #eee
    }
    em,
    & i {
      font-style: italic
    }
    b,
    & strong {
      font-weight: 700
    }
    .selectTdClass {
      background-color: #edf5fa!important
    }
    table.noBorderTable caption,
    & table.noBorderTable td,
    & table.noBorderTable th {
      border: 2rpx dashed #ddd!important
    }
    table {
      display: table;
      width: auto!important;
      margin: 0 auto 20rpx;
      border-collapse: collapse
    }
    td,
    & th {
      padding: 10rpx 20rpx;
      border: 2rpx solid #ddd
    }
    caption {
      padding: 6rpx;
      text-align: center;
      border: 2rpx dashed #ddd;
      border-bottom: 0
    }
    th {
      background: #f7f7f7;
      border-top: 4rpx solid #bbb
    }
    td p {
      margin: 0;
      padding: 0
    }
    .ue-table-interlace-color-single {
      background-color: #fcfcfc
    }
    .ue-table-interlace-color-double {
      background-color: #f7faff
    }
    .bottom-floating-banner {
      position: fixed!important;
      bottom: 0
    }
    .list-paddingleft-2 {
      padding-left: 60rpx
    }
    &--fullscreen {
      margin-top: 0;
      padding: 0
    }
    .edui-faked-video {
      width: 100%
    }
  }
}
</style>
